<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			background: red url() 0 0 no-repeat;
		}

	</style>
	<script type="text/javascript">
		window.onload = function  () {
			 box = document.getElementById('box');

			 num = 0;
			 function run () {
			 	boxwidth = window.getComputedStyle ? window.getComputedStyle(box,null).width : box.currentStyle.width;
			 	boxHeight = window.getComputedStyle ? window.getComputedStyle(box,null).height : box.currentStyle.height;

			 	if(parseInt(boxwidth)>=400){
			 		num =1;
				 }else if(parseInt(boxwidth)<=200){
				 	num =0;
				 }

				 if(num==1){
				 	newWidth = parseInt(boxwidth)-2;
			 		newHeight = parseInt(boxHeight)-2;
			 	}else{
			 		newWidth = parseInt(boxwidth)+2;
			 		newHeight = parseInt(boxHeight)+2;
			 	}
			 	


			 	box.style.width = newWidth+"px";
			 	box.style.height = newHeight+"px";

			 }

			startbtn = document.getElementById('startbtn');

			startbtn.onclick = function (){

				time = setInterval(run, 25);
			}

			stopbtn = document.getElementById('stopbtn');
			stopbtn.onclick = function  (argument) {
				clearInterval(time);
			}

			 
		}



		
	</script>
</head>
<body>
	<input type="button" value="停止" id="stopbtn">
	<input type="button" value="开始" id="startbtn">
	<div class="box" id="box"></div>

</body>
</html>